﻿<link href="/media/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="/media/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>
<link href="/media/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="/media/css/style-metro.css" rel="stylesheet" type="text/css"/>
<link href="/media/css/style.css" rel="stylesheet" type="text/css"/>
<link href="/media/css/style-responsive.css" rel="stylesheet" type="text/css"/>
<link href="/media/css/default.css" rel="stylesheet" type="text/css" id="style_color"/>
<link href="/media/css/uniform.default.css" rel="stylesheet" type="text/css"/>
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL STYLES -->
<link href="/media/css/jquery.gritter.css" rel="stylesheet" type="text/css"/>
<link href="/media/css/jqvmap.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="/media/css/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen"/>
<!-- BEGIN BODY -->

<!-- 遮罩层 -->
<div id='PageLoadingTip' style="position: absolute; z-index: 1000; top: 0px; left: 0px; width: 100%; height: 100%; background: #222222; text-align: center;">
    <h1 style="top: 48%; position: relative"><img src="/media/image/loading.gif"></h1>
</div>


<div class="container-fluid" style="background-color:white">
    <div class="row-fluid">
        <div class="span12" >
            <div class="portlet paddingless">
                <div id="container"  style="height: 200px"></div>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="row-fluid">
        <div class="span12">
            <!-- BEGIN PORTLET-->
            <div class="portlet paddingless">
                <div class="portlet-title line">
                    <div class="caption"><i class="icon-bell"></i>日志信息</div>
                    <div class="tools">
                        <a href="" class="collapse"></a>
                        <#--<a href="#portlet-config" data-toggle="modal" class="config"></a>-->
                        <a href="#" class="reload"></a>
                        <#--<a href="" class="remove"></a>-->
                    </div>
                </div>
                <div id="refresh">
                    <div class="portlet-body">
                        <!--BEGIN TABS-->
                        <div class="tabbable tabbable-custom">
                            <ul class="nav nav-tabs">
                                <li class="active"><a href="#tab_1_1" data-toggle="tab">共享日志</a></li>
                                <li><a href="#tab_1_2" data-toggle="tab">Activities</a></li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane active" id="tab_1_1">
                                    <div class="scroller" data-height="290px" data-always-visible="1" data-rail-visible="0">
                                        <ul class="feeds">
                                        <#list logList as list>
                                            <li>
                                                <div class="col1">
                                                    <div class="cont">
                                                        <div class="cont-col1">
                                                            <div class="label label-success">
                                                                <i class="icon-bell"></i>
                                                            </div>
                                                        </div>
                                                        <div class="cont-col2">
                                                            <div class="desc">
                                                                ${list.desc}
                                                                <a href="#" title="${list.title}" class="btn icn-only" id="${list.id}"><span id="${list.spanId}" hidden>${list.contentInfo}</span><i class="icon-share-alt"></i></a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col2">
                                                    <div class="date">
                                                        ${list.pushTime}
                                                    </div>
                                                </div>
                                            </li>
                                        </#list>

                                        </ul>
                                    </div>
                                </div>
                                <div class="tab-pane" id="tab_1_2">
                                    <div class="scroller" data-height="290px" data-always-visible="1" data-rail-visible1="1">
                                        <ul class="feeds">
                                        </ul>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <!--END TABS-->
                    </div>
                </div>

            </div>
            <!-- END PORTLET-->
        </div>
    </div>
</div>
<!--普通弹出层-->
<div id="modal-demo" class="modal fade middle" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content radius">
            <div class="modal-body">
                <p id="p-content">个人信息配置成功</p>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- BEGIN CORE PLUGINS -->
<script src="/media/js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="/media/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<!-- IMPORTANT! Load jquery-ui-1.10.1.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
<script src="/media/js/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script src="/media/js/bootstrap.min.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="media/js/excanvas.min.js"></script>
<script src="media/js/respond.min.js"></script>
<![endif]-->
<script src="/media/js/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="/media/js/jquery.blockui.min.js" type="text/javascript"></script>
<script src="/media/js/jquery.cookie.min.js" type="text/javascript"></script>
<script src="/media/js/jquery.uniform.min.js" type="text/javascript" ></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>


<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="/media/js/app.js" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->

<script type="text/javascript">

    $('.icn-only').click(function () {
        // var content = $('#contentInfo').val();
        console.log(this.id)
        var spanId = this.id + "_span";
        var content = $('#' + spanId).html();
        $('#p-content').html(content);
        $("#modal-demo").modal("show")
    });
</script>

<#--<script type="text/javascript">-->
    <#--$('.reload').click(function () {-->
        <#--$.ajax({-->
            <#--url : '/welcome-reload',-->
            <#--data : {tm : new Date().getTime()},-->
            <#--async : true,-->
            <#--success : function(data){-->
                <#--$('#refresh').html(data)-->
            <#--}-->
        <#--});-->
    <#--})-->
<#--</script>-->

<!-- ws -->
<script type="text/javascript">
    var socket;
    if(typeof(WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    }else {
        console.log("您的浏览器支持WebSocket");
        socket = new WebSocket("ws://localhost/websocket");
        //打开事件
        socket.onopen = function () {
            console.log("Socket 已打开");
            //socket.send("这是来自客户端的消息" + location.href + new Date());
        };
        //获得消息事件
        socket.onmessage = function (msg) {
            var info = $('#span-badge',parent.document).html();
            $('#span-badge',parent.document).html(msg.data);

        };
        //关闭事件
        socket.onclose = function () {
            console.log("Socket已关闭");
        };
        //发生了错误事件
        socket.onerror = function () {
            // alert("Socket发生了错误");
        }
        $(window).unload(function () {
            socket.close();
        });
    }
</script>
<script>
    jQuery(document).ready(function() {
        App.init(); // initlayout and core plugins
    });
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    // var app = {};
    option = null;
    var uploadedDataURL = "/jsonlocal";
    myChart.showLoading();
    $.getJSON(uploadedDataURL, function (rawData) {
        myChart.hideLoading();
        function convert(source, target, basePath) {
            for (var key in source) {
                var path = basePath ? (basePath + '.' + key) : key;
                if (key.match(/^\$/)) {

                }
                else {
                    target.children = target.children || [];
                    var child = {
                        name: path
                    };
                    target.children.push(child);
                    convert(source[key], child, path);
                }
            }

            if (!target.children) {
                target.value = source.$count || 1;
            }
            else {
                target.children.push({
                    name: basePath,
                    value: source.$count
                });
            }
        }
        var data = [];
        convert(rawData, data, '');
        var localDate = new Date();
        var formatDate = localDate.getFullYear() +'/'+ (localDate.getMonth() + 1);
        myChart.setOption(option = {
            title: {
                text: '应用研发二室工作量热力图',
                subtext: formatDate,
                left: 'center'
            },
            tooltip: {},
            series: [{
                name: '工作量看板',
                type: 'treemap',
                visibleMin: 300,
                data: data.children,
                leafDepth: 1,
                levels: [
                    {
                        itemStyle: {
                            normal: {
                                borderColor: '#555',
                                borderWidth: 4,
                                gapWidth: 4
                            }
                        }
                    },
                    {
                        colorSaturation: [0.3, 0.6],
                        itemStyle: {
                            normal: {
                                borderColorSaturation: 0.7,
                                gapWidth: 2,
                                borderWidth: 2
                            }
                        }
                    },
                    {
                        colorSaturation: [0.3, 0.5],
                        itemStyle: {
                            normal: {
                                borderColorSaturation: 0.6,
                                gapWidth: 1
                            }
                        }
                    },
                    {
                        colorSaturation: [0.3, 0.5]
                    }
                ]
            }]
        })
    });;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>

<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
<!-- 遮罩层 -->
<script type="text/javascript">
    function _PageLoadingTip_Closes() {
        $("#PageLoadingTip").fadeOut("normal", function () {
            $(this).remove();
        });
    }
    var _pageloding_pc;
    $.parser.onComplete = function () {
        if (_pageloding_pc) clearTimeout(_pageloding_pc);
        _pageloding_pc = setTimeout(_PageLoadingTip_Closes, 1000);
    }
</script>
